<template>
    <h1>Three</h1>
    <RouterView></RouterView>
    <span v-for="n in 10" >
        <!-- 直接通过RouterLink标签动态绑定跳转地址 -->
        <RouterLink :to="`/Three/Second/${n}`">id:{{ n }}</RouterLink>
        <!-- 通过点击事件将当前地址修改为目标地址 -->
        <span @click="toDetail(n)" class="link">id:{{ n }}</span>
    </span>
    <h3>{{ useRoute().params.id }}</h3>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
//要求必须接收useRouter()，不能直接使用
const Router = useRouter();
console.log(useRoute().params.id);

let toDetail = function (n) {
    Router.push(`/Three/Second/${n}`)
    console.log(Router);
}
</script>
<style scoped>
.link{
    color: #000;
}
.link:hover{
    color: red;
    cursor: pointer;
}
</style>